<template>
  <h1>布局组件</h1>
  <el-row :gutter="10">
    <el-col :span="4" style="background-color: #154fab;">测试数据</el-col>
    <el-col :span="4" style="background-color: #15ab21;">测试数据</el-col>
    <el-col :span="4" style="background-color: #ab1542;">测试数据</el-col>
    <el-col :span="4" style="background-color: #ab8115;">测试数据</el-col>
    <el-col :span="4" style="background-color: #15aba6;">测试数据</el-col>
    <el-col :span="4" style="background-color: #15aba6;">测试数据</el-col>
  </el-row>

  <h3>两张图</h3>
  <el-row :gutter="10">
    <el-col :span="12"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="12"><img src="2024.png" alt="" style="width: 100%;"></el-col>
  </el-row>
  <h3>六张图</h3>
  <el-row :gutter="10">
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
  </el-row>
  <h3>三张张图</h3>
  <el-row :gutter="10"> <!-- 1:2:3 -->
    <el-col :span="12"><img src="fcq.jpg" alt="" style="width: 100%;"></el-col>
    <el-col :span="8"><img src="fcq.jpg" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="fcq.jpg" alt="" style="width: 100%;"></el-col>
  </el-row>
  <hr>
  <h3>8个等分的列,每列显示数字12345678</h3>
  <el-row :gutter="10">
    <el-col :span="3" style="border: 1px solid red;" v-for="i in 8" >{{i}}</el-col>
  </el-row>
  <h3>列偏移</h3>
  <el-row :gutter="10">
   <el-col :span="20" :offset="2"><img src="pp.png" alt="" style="width: 100%;"></el-col>
  </el-row>
  <hr>
<!-- 要求占12列,且居中 -->
  <el-row :gutter="10">
    <el-col :span="12" :offset="6"><img src="pp.png" alt="" style="width: 100%;"></el-col>
  </el-row>
<!-- 嵌套布局 -->
  <el-row :gutter="10">
    <el-col :span="12" ><img src="pp.png" alt="" style="width: 100%; height: 126.13px;"></el-col>
    <el-col :span="12" >
    <el-row :gutter="10">
      <el-col :span="8" ><img src="pp.png" alt="" style="width: 100%;"></el-col>
      <el-col :span="8" ><img src="pp.png" alt="" style="width: 100%;"></el-col>
      <el-col :span="8" ><img src="pp.png" alt="" style="width: 100%;"></el-col>
    </el-row>
    </el-col>
  </el-row>
</template>
<script setup>

</script>
<style scoped>

</style>